طراحی وب سایت

درباره سایت

آخرین مطالب

امکانات وب

طراحي وب از ابتدا تا کنون

تاريخچه وب

طراحي وب سايت

طرح وب سايت

Adobe Flash

وب سايت هاي پوياو (Dynamic) ايستا (Static)

ASP .NET

PHP - PHP: Hypertext Preprocessor

تاريخچه وب

Tim Beers-Lee (تيم برنرز لي)، بنيانگذار شبکه جهاني وب، با راه اندازي يک وب سايت در آگوست سال ، نام خود را به عنوان نخستين طراح وب در تاريخ به ثبت رساند. او در نخستين طراحی وب سايت خود از ابرمتن (Hyperlink) و پيوندي براي ايميل استفاده کرده بود.

در آغاز، سايتهاي وب با کُدهاي ساده «اچ تي ام ال» نوشته مي شدند، گونه اي از زبان کُدنويسي که ساختار ساده اي به وب سايت ها مي داد، شامل سرتيتر و پاراگراف، و توانايي پيوند دادن به صفحه هاي وب ديگر، با اَبَرمتن. در مقايسه با روش هاي ديگر، اين راه تازه و متفاوتي بود که کاربران به سادگي مي توانستند با يک مرورگر، صفحه هاي پيوند خورده را باز کنند.

با پيشرفت وب و هنر طراحي آن، زبان کُد نويسي اش، اَبَرمتن يا اچ تي ام ال، پيچيده تر و پرانعطاف تر شد. ابزاري مانند جدول ها که بيشتر براي نمايش نمودارهاي داده اي بودند، بزودي مورد استفاده نادرست، براي چيدمان هاي پنهان در صفحه هاي وب قرار گرفتند. با پيدايش صفحه هاي الگوي وب يا «CSS»، روش نادرست طراحي با جدول هاي پنهان در صفحه، از گردونه خارج، و بجاي آن استفاده مناسب از صفحه هاي الگوي وب يا «CSS»، جايگزين شد.

فن آوري هاي يکپارچه سازي داده گاه ها (Database)، مانند زبان هاي کُدنويسي سمت سرور (Server-Side Scripting) مانند CGI, PHP, ASP.NET, ASP, JSP و ColdFusion، و استانداردهاي طراحي مدرن با الگوها (CSS)، ساختار سايت هاي وب را باز هم تغيير داده و آنرا پيشرفته تر کرده اند.

Tim Beers-Lee

Tim Beers-Lee on November 18,2005

تولد Timothy Beers-Lee

8 June 1955 (1955-06-08)

(age 53) London, UK

وب سايت مشاهده در پنجره جديد Tim Beers-Lee

مشاهده در پنجره جديد مطالعه بيشتر ...

همچنين با آمدن نگاره هاي جاندار و فن آوري هاي پويانمايي به صفحه ها، مانند فِلَش (Flash)، چهره وب بيشتر از پيش تغيير کرد و توانمندي هاي تازه به سازندگان رسانه و طراح هاي وب داده شد، و توانايي هاي بيشتر و کارايي ها تازه مرورگرها براي html.

طراحي وب سايت

وب سايت مجموعه اي از اطلاعات درباره موضوع و يا عنوان خاص است. طراحي يک وب سايت مشخص کننده آرايش و ساختــار صفحات وبي است که بوجود آورنده وب سايت خواهند بود. يک صفحه وب شامـــل اطلاعاتي درمورد هدف ايجــاد وب سايت ميباشد. يک وب ســايت را همــانند کتابي تصور کنيد کـه هر صفحه وب در حکم برگي از کتاب خواهد بود.

در زمينه طراحي وب سايت جنبه هاي گوناگوني بايد در نظر گرفته شود که به سبب پيشرفت روز افزون اينترنت همواره براين موارد افزوده مي شود.

براي وب سايت هاي تجاري عمومي، موارد زير از جمله اصلي ترين آنها به شمار مي روند:

طراحي سايت بر طبق عنوان و محتواي مطالب مي باشد.

مطالب، جوهر کلام و اطلاعات درون سايت بايد مطابق با هدف سايت بوده و طيفي از عموم را نشانه رود که به دنبال اطلاعات ارائه شده در سايت هستند.

سايت بـــايد قابل فهم بوده و برقـــراري ارتبــاط با آن حتي براي مخاطباني کـه آشنايي چنداني بـا وب ندارند، آســـان باشد. چنانچه سايت به اندازه کافي بزرگ بوده و اطلاعات زيادي را شامــل شود، بـايد اطلاعات راهنما را به گونه اي بکار برد که به سرعت در اختيار بيننده قرار گيرند.

نماي کــار بايد کلي بوده و تمام صفحه را دربر گيرد تا بتواند پايـداري و ثبات را القــا کند. سبک نگارش بايد زيبا و تخصصي بوده و مناسب با سليقه مخاطبان و محتواي سايت باشد.

در نگارش متون و اطلاعاتي که مخاطب به دنبال آنها است بايد بزرگ نمايي شود تا به بيننده القا کند که اين همان چيزي است که به دنبال آن بوده است.

همچنين سايت بايد به سادگي در اينترنت يافت شود و درصورت امکان در بالاي ليست هاي جستجو قرار گيرد، اگرچه همواره اينگونه نباشد لااقل در طراحی موتورهاي جستجوي اصلي چنين شود.

يک وب سايت معمولا شامـل متن و تصـاويـر است. اولين صفحه يک وب سـايت صفحه خانه (Home Page) و يا صفحه ايندکس (index) ناميده مي شود. بعضي از وب سايت هـــا از صفحه اي استفـــاده ميکنند کـــه معمولا صفحه خوش آمد ناميده مي شود. اين صفحه ممکن است شــامــل مواردي چون پيغــــــــــام خوش آمـدگويي، انتخاب زبـــان، انتخاب ناحيه جغرافيايي و يـا اعلام عدم پذيرش مسوليت درمــوارد خاص باشد. هر صفحه وب درون سايت وب، يک فايل HTML است که URL مخصوص به خود را دارد.

بعد از اين که هر صفحه وب ساخته شد، اين صفحات با استفاده از فهرست راهنمايي که از پيوندهاي مختلف تشکيل شده است به يکديگر متصل مي شوند.

هنگامي که يک وب ســايت کامل شد براي آنکه بـراي همه برروي اينترنت قابل مشاهده باشد بايد منتشر و يا ارسال (Upload) شود. اين کار به کمک يک ميزبان FTP انجام ميشود. هنگامي که سايت منتشر شد، مدير سايت براي افزايش بازديدکنندگان، از تکنيکهاي گونــاگون استفاده مي کند. اين کار با ثبت کردن وب سـايت در موتورهاي جستجويي نظير Google و Yahoo، تبادل لينک با وب ســايت هاي ديگر، ايجاد پيوند با وب سايتهاي مشابه و غيره امکان پذير است.

نمونه طراحي استاتيک : http:\\rohanit.com

طرح وب سايت

طرح وب به قالب نمايشي و طراحي گرافيکي صفحات موجود در وب سايت مي گويند که معرف محتوا و مطالب آن وب سـايت مي باشد. طرح وب جلوه بصـري هدف وب سايت است و اولين بخش از يک صفحه وب است که ذهن مخاطب را با خود درگير مي کند.

طراح وب با در نظر گرفتن هدف سايت و مخاطبان آن و با استفـاده از المان هاي متناسب با رويکرد سـايت و به کمک ذهن خلاق و ذوق هنري خود در بکار بردن ابعاد و رنگها، طرحي خلق مي کند که ضمن ايجـاد يکپارچگي در کليه صفحات وب سايت، نماي تکرار شونده و خسته کننده را به مخاطب القا نکند. در وب سايت بايد از الگوي ثابتي در صفحات استفاده کرد که کاربر به هنگام ديدن صفحات متوجه اين است که همه صفحات در يک سايت مشخص هستند.

Adobe Flash

Adobe Flash (سابقا Macromedia Flash) يک برنــامه ايجاد انيميشن و يــا برنامه کاربردي گرافيکي قوي است که براي سـاخت و اجرا کردن محتواي پويـــا، مطالب چند رسانه اي مــانند صدا و تصويــر و برنامه هــاي کاربردي محاوره اي بر روي وب و از طريق مرورگر (Browser) مورد استفاده قرار مي گيرد.

فلش مــانند اغلب قــالب هــا و تــوافقنــامه هــاي اينترنتي نبوده و يک محصول تـــائيد شده از طرف ســازمــان استانداردهـا نمي باشد. فلش بسيار محدودکننده تر از قالب HTML بوده کـه به هر حال ديدن آن احتياج به يک Plugin اختصاصي دارد و با بيشتر امکانات کاربردي مرورگرهاي وب مانند دکمه Back سازگاري ندارد مگر اين که لينکي به يک صفحه HTML جديد از فــايل فلش پيوند داده شده بـــاشد که در اين صورت انيميشن صفحه قبـل بــايد از ابتدا شروع شود، تــا جائيکه محدوديتهــاي موجود ممکن است بــا توجه به اهداف طراحي وب سـايت، بي ربط بنظر برسند.

براساس آمـار 98 درصد از کاربــران وب در آمريکا برنــامه اجراي فلش را بـرروي رايــانه هاي خود نصب کرده اند و حدود 45 تا 56 درصد از آنها آخرين نسخه اين برنامه را دارند که البته نوساناتي نيز در اين آمار وجود دارد.

بسياري از طراحـان گرافيک از فلش به جهت کنترل کاملي کـه برروي هر بخش از طرح به آنها مي دهد و حرکت و روحي که به هر المان اضافه ميشود استفاده ميکنند.

برخي از طراحــــان برنــامه هــاي کاربردي به اين دليل از فلش استفــاده مي کنند که به آنهــــا اجازه ســـاخت برنــامه هائي را مي دهد که نيــازي به دوباره خواني و يـــا رفتن به صفحه جديد به ازاي هر فعل و انفعـــالي را ندارد. فلش توانائي استفاده از فونت هايي که برروي اغلب رايانه ها نصب نشده اند را دارد.

سايتهــاي بسياري وجود دارد که تمامــا در قالب فلش هستند. سايتهــاي ديگري نيز از فلش به جاي فايلهــاي تصويــري jpeg و يا gif استفـاده مي کنند، البته با قابليت حجم کمتر فايلهــاي برداري و سرعت بيشتر دريــافت فايلها.

همينطور از فلش مي توان براي جلوگيري از تکثير و يا جستجوي غير مجاز استفاده کرد.

مخالفان فلش ادعــا مي کنند که وب سايتهاي فلش طرحي کامل نداشته و اغلب داراي رابط کاربر مغشوش و غير استاندارد مي باشند. هم اکنون موتورهاي جستجو قادر به فهرست بندي فايلهـاي فلش نيستند که باعث مي شود مطالب ســايت به سادگي پيدا نشده و مورد جستجو قرار نگيرند، دليل آن اين است کـه بسيــاري از موتورهــاي جستجوگر، وب ســايتها را بــا تکيه بر متن، فهرست بندي

بعد از اين که هر صفحه وب ساخته شد، اين صفحات با استفاده از فهرست راهنمايي که از پيوندهاي مختلف تشکيل شده است به يکديگر متصل مي شوند. مي کنند. البته اين قابليت وجود دارد که براي مرورگرهائي که توانائي نمايش فايلهــاي فلش را ندارند، مطالب جايگزين مشخص شود که اين مطالب به درک بهتر موتورهاي جستجوگر از سايت مي انجامد و باعث بوجود آوردن ديد بهتري از سايت مي شود.

زبــان اسکريپت نويسي فلش، Action Script ناميده مي شود و بـــه زبــان JaveScript شباهت دارد کــه البتـه ويژگي هاي مفيدي را با يکديگر ادغام نموده است. مثلا در خصوص اندازه قلم، پاسخ به رويدادهاي زمـان اجرا، امکاناتي براي افراد نابينا و بسياري ويژگيهاي ديگر.

ActionScript يک زبان شي گرا بوده که امکان استفاده از CSS ،XML و طراحي برنامه هاي کاربردي وب بر پـايه کلاس هاي ساخت يافته را در فلش به ما مي دهد.

وب سايت هاي پوياو ايستا

وب سايتهاي ايستا معمولا به وب سايتهايي گفته مي شود که صفحات آن يک بار ايجاد و تا مدت زماني تغيير نمي يابند و در صورت نياز به تغيير و بروزرساني صفحات آن معمولا اين کار پر دردسر و زمان بر است و در صورت نياز به تغيير بايستي صفحه تغيير يافته منتشر ( Upload ) گردد .

وب سايتهاي دايناميک به وب سايتهايي گفته مي شود که در طراحي آن از زبانهاي برنامه نويسي استفاده شده است و در صورت نياز به تغيير در سايت ( ايجاد صفحه جديد ، ويرايش متون ، ايجاد پيوند و ... ) اينکار به سادگي و توسط نرم افزار نوشته شده مخصوص آن انجام مي پذيرد .

در وب سايتهاي دايناميک صفحه به پايگاه داده وصل بوده و با توجه به درخواست کاربر ( جستجو ، پيوند به صفحه و ... ) محتويات صفحات تغيير مي يابند .

روش قديمي مورد استفاده در طراحي صفحات وب (HTML)، بصورت ايستا (Static) است که بـراي تبديل آن به مطالب پويا دو روش وجود دارد:

روش سمت سرويس دهنده (Server-side)

روش سمت سرويس گيرنده (Client-side)

در روش Server-side يک سرور وب که نرم افـــزار خاصي را اجرا ميکند، يک صفحه HTML مطابق بـا درخواست کاربر و متناسب با ديگر متغيرها ايجاد مي کند.

:: زبانهاي اسکريبت نويسي متداول عبارتند از:

PHP-Perl-JSP-ColdFusion-ASP-ASP .NET-Ruby-Python

مانند دايرکتوري معروف ايراني www.yaoo.ir که آينده روشني در انتظار اين سايت ميباشد.هزاران ايراني روزانه از اين دايرکتوري بازديد کرده و به اهدافشان ميرسند.

در روشClient-side ، کدهــا در مرورگــر کاربـر اجـرا مي شوند و بنـابراين بــراي کارهــاي مهم نبــايد از اين روش استفاده شود زيـرا از قابليت ها و امکانات کاربر اطلاعي نداريم . اين روش بيشتر هنگــام آرايش و تزيين صفحه وب و يــا بکــار بـردن مطالب بي دوام و بلادرنگ مورد استفـاده قــرار مي گيرد کـــه در بيشتــر مواقع اين اعمــال بوسيله JavaScript انجام مي شود.

DHTML سمت سرويس گيرنده نيز در جهت افزايش تحرک و فعل و انفعالات در صفحات وب بوجود آمده است که البتـه در کنــار امکــانــاتي کـه عرضه نموده ميتواند بــــاعث بروز مشکلاتي پيرامون دسترسي به صفحــات و يــا بهينه ســـازي موتورهاي جستجو گردد. اغلب نرم افزارهــاي طراحي شده بــراي کمک به افــراد معلول و بيشتر موتورهاي جستجو از DHTML سمت سرويس گيرنده پشتيباني نمي کنند.

در صورتي که فهرست (Menu) يک وب سايت بوسيله JavaScript ساخته شده باشد، بطور معمول موتورهاي جستجو قادر به تشخيص صفحـاتي که در فهرست، پيوند طراحی داده شده اند نيستند مگر اين که تمهيداتي در جهت قراردادن راهنماهاي جايگزين در ديگر جاهاي صفحه در نظر گرفته شده باشد.

ASP .NET

تکنولوزي توليد و نوسعه صفحات دايناميک مي باشد که به سه زبان #VB, C# , J نوشته مي شود.

ASP .NET بخشي از NET Platform. شرکت مايکروسافت و جانشين تکنولوژي قديمي تر از آن بــه نــــام ASP است. ASP .NET بر پــايــه "زبـــان مشترک زمــان اجـــرا" ساخته شده است، به اين معني که برنــامه نويســان مي توانند کــدهاي ASP .NET را بــا استفــاده از هر زبــان برنامه نويسي NET. مايکرو سافت بنويسند.

پايگاه داده (Database)

در علوم رايانه، پايگاه داده به عنوان يک مجموعه ساخت يــافته از داده ها يا اطلاعات ذخيره شده در يک رايانه تعريف مي شود. بطوريکه ميتوان آنرا براي پاسخ به درخواستها کاوش نمود.

داده هاي بازيــافت شده در جواب درخواستها، اطلاعاتي را به ما مي دهند که به عنوان نتــايج، مورد استفاده قرار مي گيرند. برنــامه کامپيوتري مورد استفــاده براي اداره کردن و جستجو نمودن يک پايگــاه داده، سيستم مديريت پايگــاه داده (DBMS) ناميده ميشود. خصوصيـات و طراحي سيستمهــاي پايگــاه داده در علم اطلاعات گنجانده شده اند.

برچسب: طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده: hoda تاريخ: يکشنبه 30 تير 1392 ساعت: 15:36

تاريخچه اينترنت در ايران

بدون شک آغاز ارتباط با شبکه اينترنت در ايران همواره نام مرکز تحقيقات فيزيک نظري و رياضيات را به ياد مي آورد. مرکز تحقيقات فيزيک نظري و رياضيات که در سال 1369 بعنوان نماينده ايران در شبکه آموزش و پژوهش اروپا پذيرفته شده بود، در سال 1370 ارتباط ايران را بصورت e-mail و از طريق گره اتريش با شبکه اينترنت برقرار نمود.

پس از ارتباط مطمئن و دائمي تر با اينترنت در سال 1371، مرکز تحقيقات فيزيک نظري سرويس دهي به دانشگاهها را آغاز نمود.

از سال 1372 ارايه اينترنت در ايران توسط مراکز خصوصي آغاز شد، در حاليکه قبل از آن شرکت مخابرات از طريق شرکت ديتا اقدام به ارايه سرويس اينترنت کرده بود.

طراحی وب سایت

Web :

وب بر اساس مدل سرويس گر(server)/سرويس گير(client) عمل ميكند

مدل سرويس گر و سرويس گير در سيستم شبكه هاي كامپيوتري شامل 3 جزء است . سرويس گر ، سرويس گير و شبكه كه ، سرويس گير يك نرم افزار است كه بر روي كامپيوتر كاربر اجرا ميشود و سرويس گر نرم افزاري است كه بر روي كامپيوتري كه عمل تغذيه اطلاعاتي را به عهده دارد انجام ميشود. كاربر از طريق اين نرم افزار ميتواند درخواستهايي را براي دريافت اطلاعات و انجام اعمالي ارسال دارد اين درخواست از طريق شبكه به كامپيوتر سرويس گر ميرسد و سرويس گر اعمال لازم را انجام مي دهد. تمام اطلاعاتي كه بر اساس مدل سرويس گر و سرويس گير عمل ميكنند از يكسري ضوابط يا پروتكل هايي پيروي ميكنند كه براي آن سيستم تعريف شده اند. اين شكل فعاليت درخواست و پاسخ كه از طريق مدل سرويس گر و سرويس گير اجرا ميشود توانائيهاي زيادي دارد رابطه سرويس گير و سرويس گر بر اساس يك پروتكل از پيش تعيين شده برقرار ميشود.

نرم افزار سرويس گر ميتواند براي هر نوع سخت افزار خاصي طراحي شود در واقع Server ديگر نگران اينكه كاربر از چه نوع كامپيوتري استفاده ميكند نخواهد بود زيرا ميداند كه زبان مشترکي با Client دارد كه صرفنظر از سيستم سخت افزاري كاربر هر دوي آنها به اين زبان با همديگر ارتباط برقرار ميكنند در واقع اين طراحي در سطح نرم افزار Client صورت گرفته و همين امر است كه وب را به صورت يك پديده غير وابسته به سيستم در آورده است . Platform Independent براي درك بهتر موضوع مدل Server/client را مشابه سيستم پخش تلويزيوني مي دانيم كه برنامه هاي تلويزيون از طريق هر دستگاه تلويزيوني گرفته ميشود اطلاعات از يك سيستم پخش امواج بر اساس ساختار استاندارد انتشار مي يابد.

- مرورگر هاي Web ميتوانند به اطلاعات چند پروتکلي دسترسي داشته باشند مرورگرهاي وب چند پروتکلي هستند اين بدان معناست كه مرورگر ها ميتوانند به انواع مختلفي از سرويس گرها كه بر اساس پروتكل هاي مختلفي ارتباط برقرار ميكنند دسترسي داشته باشند مهمترين پروتكل هايي كه مرورگرها ميتوانند با استفاده از آنها به سرويس گرها متصل شوند عبارتند از :

HTTP -Hyper text transmission protocol : اين پروتكل مخصوص وب است و براي انتقال ابر متني از طريق شبكه طراحي شده است.

- تهيه ليستي از فايل هاي موجود در کامپيوتر ميزبان.

- حذف، تغيير نام و جا به جا کردن فايل ها در کامپيوتر ميزبان.

- جستجوي دايرکتوريهاي کامپيوتر ميزبان.

- ايجاد يا حذف دايرکتوري روي کامپيوتر ميزبان.

برچسب: طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده: hoda تاريخ: يکشنبه 23 تير 1392 ساعت: 14:09

طراحی وب سایت

از امروز بخش جديدي را براي شما عزيزان در نظر گرفته ايم. اين بخش شامل آموزش مرحله به مرحله طراحي وب سايت مي باشد که سعي مي شود هر هفته مقاله اي در اين زمينه به شما عزيزان ارائه کنيم. در اولين قسمت از اين سري آموزشها با ما باشيد.

اين دوره آموزسي بر اساس کتاب Build Your Own Website The Right Way Using HTML & CSS از انتشارات Sitepoint مي باشد.

طراحی وب سایت

اين کتاب براي کساني مفيد است که از طراحي سايت اطلاعي ندارند و مي خواهند تازه به جمع طراحان سايت ملحق شوند پس مسلما از ساده ترين نکات آغاز مي شود .

اين کتاب شما را با HTML و CSS آشنا ميکند و راه را براي ساخت يک وب سايت استاندارد به شما نشان مي دهد. ذکر اين نکته لازم است که ترجمه خط به خط کتاب ارائه نمي شود و چيزي که به عنوان برداشت شخصي من يک طراح سايت (بهزاد علي بيگي) از کتاب مي باشد در قالب مقالات آموزشي براي شما بيان خواهد شد.

سعي مي کنم در هر مقاله حداکثر يک فصل از کتاب را آموزش دهم و مسلما با بازخوردي که از خوانندگان خواهم گرفت کيفيت کار و هم چنين وسعت کار را افزايش خواهم داد.

فصل اول:

Setting up Shop

اين فصل در واقع آماده کردن کامپيوتر براي کار، قبل از زدن اولين طرح شماست.

قبل از اين که وب سايت خودتان را بسازيد، مي بايست کامپيوتر خود را براي کار آماده نماييد که شامل برنامه هايي است که يا در سيستم شما موجود مي باشد و يا اين که مي بايست آن ها را نصب نماييد.

1- وسيل? ابتدايي براي ويرايش فايل هاي متني که در واقع صفحه وب شما را شامل ميشود

2- يک مرورگر (web browser) براي ديدن صفحات وب در آن

3- فرستادن صفحه وب سايت به محيط اينترنت با استفاده از ftp client

چون اکثر کاربران ما درايران از ويندوز استفاده مي کنند پس ابزارهاي موجود در ويندوز را بررسي خواهيم کرد.

ابزارهاي اوليه در ويندوز:

1- اديت کردن متن : براي اديت کردن متن در ويندوز مي توانيد از Notepad استفاده نماييد. اين متن، همان صفح? وب است .

براي دسترسي به اين برنامه در محيط ويندوز مسير زير را طي کنيد:

Start > All Programs > Accessories > Notepad

2- ديدن خروجي فايل : براي ديدن کار خروجي مي بايست از مرورگر و يا browser استفاده کنيم. مرورگرهاي متفاوتي وجود دارد که بحث آنها بسيار مفصل است ولي در محيط ويندوز مرورگر Inteet Explorer در دسترس است.

شما مي توانيد آن را در دسکتاپ خود و يا Quick Launch ويا فولدر برنامه ها و يا در منوي start پيدا کنيد.

براي اديت کردن صفحات خود مي توانيد از برنامه NoteTab استفاده کرد .مزيت استفاده از آن اينست که مي توانيد تب هاي مختلفي را براي صفحات مختلف باز کنيد و بعد از بستن هم در حافظه ش مي ماند و براي دفعه بعد هم باز مي ماند.

آن را از اين آدرس دانلود نماييد.

همچنين مرورگرهاي گوناگوني وجود دارد که استفاده از آن ها را در کنار Inteet Explorer توصيه مي کنم. اما در اينجا از يکي از بهترين آنها را نام مي برم : firefox

طراحی وب سایت

اما همه عناصر که متن نيستند شما براي ويرايش عکس هم به برنامه هايي نياز داريد که مي توانيد از برنامه هاي زير استفاده کنيد:

Adobe photoshop

Adobe fireworks

Picasa

توصيه من استفاده از فتوشاپ است ، نگران نباشيد يادگيري آن براي کاربرد وب آسان است.

مرحله آخر - درست کردن مکاني است براي فايل هاي ساخته شده :

بعد از ساختن فايل هاي خود مديريت آنها بسيار مهم است و اين که در کجا فايل اصلي و در کجا تصاوير قرار گيرد و به همين ترتيب تمام عناصر وب سايت.

شما بايد يک فولدر بسازيد و تمام عناصر وب سايت خود را در آن قرار دهيد. فرض کنيد در دسکتاپ خود مي خواهيد يک وب سايت بسازيد.

Right click > new > folder

نگران نباشيد با هم پيش ميريم و به همه موارد خواهيم رسيد.

در فصل بعد شما اولين وب سايت خودتان را مي سازيد.

ادامه دارد اگر مورد استقبال قرار گيرد!

برچسب: طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده: hoda تاريخ: چهارشنبه 19 تير 1392 ساعت: 14:22

css چيست؟

تا اينجاي کار به چند مثال ساده اما کاربردي با CSS براي استفاده در وب سايت نگاهي انداختيم. براي استايل دهي خصوصيات بسيار زيادي وجود دارد که البته من قصد دارم آنها را اينجا ليست کنم، هرچند ممکن است شما تا به حال بعضي از اين استايل ها و مقدار دهي آنها را تجربه کرده باشيد.

نکته : توجه داشته باشيد که اين استايل ها کل css نيست و در فصل هاي آينده به اين مقادير اضافه خواهد شد.

Color

همانطور که قبلا هم ديديد براي رنگ دادن به عناصر استفاده مي شود.

Background-color

به دو صورت مقدار دهي مي شود يا نام رنگ (blue, red, green,..) يا با اعداد دسيمال، مانند: #3acbef

Font-family

با اين خصيصه هر فونتي را که بخواهيد مي توانيد به متون سايت خود اعمال کنيد، تنها توجه کنيد که نحوه مقدار دهي آن همانند مثال هاي قبلي است که به طور مفصل راجب به آن توضيح داده ام.

Font-size

مقدار دهي آن مي تواند مثل يکي از گزينه هاي زير باشد:

1- نام هاي آماده براي سايز دادن به فونت ؛

• XX-small

• X-small

• Small

• Medium

• Large

• X-large

• Xx-large

طراحی وب سایت

2- فونت دهي به صورت نسبي؛

• به صورت درصدي : %120

• به صورت 1.2em : em

3- فونت دهي به صورت مطلق؛

• به صورت pixel ، مانند: px12

• به صورت point، مانند: pt12

قطعاً زمانيکه بخواهيم اين امکان را به خوانندگان مطالب وب سايتمان بدهيم که با تغيير سايز صفحه مرورگر خود ( مثلا سايز %150 به جاي %100) بتوانند سايز فونت متناسب با آن را ببينند فونت دهي به صورت نسبي را مد نظرمان قرار مي دهيم.

براي مطالعه بيشتر، اين مقاله را مطالعه نماييد.

Font-weight

ضخامت فونت است که به دو صورت normal يا bold مقدار دهي مي شود.

Font-style

سبک فونت است که به دو صورت normal يا italic مقدار دهي مي شود.

Text-decoration

مدل دهي به متن به صورت: none, underline, overline و يا line-through است.

نکته : قبل از شروع به کار و استفاده از css هاي متنوع، ابتدا از css اي که تا کنون آن را ساخته ايد يک back up بگيريد و سپس با استايل هاي مختلفي که در بالا ياد گرفتيد استايل هاي مختلفي را بسازيد.

تمامي موارد بالا را مي بايست در مرورگر خود تست کنيد تا با آنها آشنا شويد ولي حالا بيائيد استايل دهي بيشتري برروي عناصر موجود در سايتمان اعمال کنيم.

- ابتدا فايل about.html را باز کنيد (در تمرين هاي قبلي ساخته شده است)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>About Bubble Under: who we are, what this site is

for</title>

</head>

<body>

<h1>BubbleUnder.com</h1>

</div>

<p>Diving club for the south-west UK - let's make a

splash!</p>

</div>

</div>

<h2>About Us</h2>

<p>Bubble Under is a group of diving enthusiasts based in

the south-west UK who meet up for diving trips in the

summer months when the weather is good and the bacon

rolls are flowing. We arrange weekends away as small

groups to cut the costs of accommodation and travel and

to ensure that everyone gets a trustworthy dive

buddy.</p>

<p>Although we're based in the south-west, we don't stay on

our own turf: past diving weekends away have included

trips up to Scapa Flow in Scotland and to Malta's

numerous wreck sites.</p>

<p>When we're not diving, we often meet up in a local pub

to talk about our recent adventures (any excuse,

eh?).</p>

</div>

</body>

</html>

- پاراگراف زير را پيدا کرده و تگ em را که جهت نمايش بيشتر يا به عبارتي تاکيد بهتر بر روي آن کلمه بکار رفته است را اضافه کنيد.

<p>And when we're not diving, we often meet up in a local pub

to talk about our recent adventures (<em>any</em> excuse,

eh?).</p>

طراحی وب سایت

- فايل را ذخيره کرده و در مرورگر خود به صورت local مشاهده کنيد، تصويري که مشاهده مي کنيد بايد مشابه عکس زير نمايش يابد.

design-web-101.jpg

- حالا فايل css خود را باز کرده و استايل زير را به آن اضافه نماييد.

em {

Font-style: normal;

Text-transform:uppercase;

{

حالا فايل css را ذخيره کرده، سپس صفحه نمايش خود را refresh نماييد، تصويري که مشاهده مي کنيد مي بايست مشابه عکس زير باشد.

design-web-102.jpg

مشابه اين مثال را مي توانيد در منوي سمت راست خدمات طراحي سايت وبسکالا مشاهده کنيد. اگر از تگ em در متون انگليسي استفاده نماييم استايل آن به صورت پيش فرض italic خواهد بود، (مانند مثال زير) که اگر بخواهيد استايل آم متن هم مانند ساير متون در آم پاراگراف باشد به آن استايل normal مي دهيم و اگر بخواهيم با حروف بزرگ ( به جز زبان فارسي )نمايش يابد از uppercase استفاده مي کنيم.

نکته :

برخي از تگ هاي و عناصر HTML هستند که به مرور زمان با تگهاي ديگري جايگزين مي شوند و از استفاده از آنها صرف نظر مي گردد، به عنوان مثال تا چند وقت پيش تگي که براي bold کردن يا ضخيم کردن متون يه کار مي رفت <b> بود که به جاي آن هم اکنون از تگ strong استفاده مي شود. اهميت اين موضوع زماني است که افراد نابينا براي کار با وب سايت ها از نرم افزارهايي استفاده ميکنند که بجاي نمايش صفحات وب آن را براي کاربر خود مي خوانند که به اصطلاح به آن ها screen reader مي گويند.در اينجاست که آنها در هنگام خوانندن مطلب متني را که با تگ em مشخص شده است را مهمتر ميدانند تا متني را که درون تگ i قرار گرفته همچنين موتورهاي جستجو در گوگل به متني که با تگ strong ضخيم شده است بيشتر توجه ميکنند و به عنوان متن مهمي که در يک متن استفاده شده است مي نگرند تا به متني که با تگ b ضخيم شده باشد.

نگاهي به عناصر درون صفحه:

در پاراگراف زير همانطور که ملاحظه مي کنيد، براي استايل دهي به پاراگراف ها استايل زير تعريف شده است، که توسط تگ body نوع فونت اين متون مشخص گرديده است.

Body{

Font-family: verdana, Helvetica, Arial, San-serif;

}

Font-size: small;

Color: navy;

}

خط بالا به ما ميگه که هر تگ p که در صفحه بود استايل بالا را بگيرد.

اما دليل ما از به کاربردن اين مثال براي اين است که مي خواهيم پاراگرافي را متمايز از ساير متون وب سايتمان کنيم و آن اولين پاراگراف متن ما است. حالا براي متمايز کردن اين پاراگراف براي آن به صورت زير عمل مي کنيم:

<p>Diving club for the south-west UK - let's make a splash! </p>

< /div>

متن درون اين تگ از خصوصيات گرفته شده ساير متون پيروي نمي کند و در عوض خصوصيت مربوط به div خود را مي گيرد که شامل خصيصه خاصي است که با id اي به نام tagline تعريف شده است که اين خصوصيت تنها به براي همين تگ خواهد بود. حالا براي تعريف درون فايل css براي آن خصوصيات زير را تعريف مي کنيم:

#tagline p {

Font-style: italic;

Font-family: Georgia, Times, Serif;

}

فايل css را ذخيره کرده و سپس پنجره مرورگرتان را refresh کنيد . صفحه شما نيز مي بايست مانند عکس زير باشد.

h1 {

color: yellow;

background-color: black;

}

h2 {

color: yellow;

background-color: black;

}

h3 {

color: yellow;

background-color: black;

}

اين کار باعث مي شود تا علاوه بر اينکه حجم فايل CSS تان زياد شود فايلتان نيز کثيف به نظر برسد، به همين دليل در اين مواقع بهتر است مانند زير عمل نماييد:

h1, h2, h3 {

color: yellow;

background-color: black;

}

توجه داشته باشيد که براي جداکردن تگ ها از همديگر از کاراکتر ( ,) کاما ، استفاده کرديم که اين علامت را مي توانيد به معناي يا تعبير کنيد.

حالا بياييد تا در پروژه مان دسته بندي کردن عناصر را انجام دهيم. ما در پروژه مان هنوز از تگ h3 استفاده نکرده ايم اما به زودي اين کار را خواهيم کرد.

فايل css تان را با اضافه کردن css زير به انتهاي آن ويرايش کنيد.

h1, h2, h3 {

font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

background-color: navy;

color: white;

}

حالا فايل css را ذخيره کرده و پنجره مرورگر خود را ويرايش نماييد تا تصويري چون عکس زير را ببينيد.

design-web-104.jpg

يک سوال ؟

به مثال زير دقت کنيد

h1, h2, h3 {

font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

background-color: navy;

color: white;

}

h3 {

color: red;

}

تگ h3 چه رنگي مي گيرد ؟

يک بار تگ h3 سفيد شده و بعد از آن رنگ آن قرمز شده پس رنگ قرمز به خود مي گيرد .

البته ارجعيت دستورات سي اس اس بحث خود را دارد که در دوره هاي بعدي حتما به آن مي پردازيم .

برچسب: طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده: hoda تاريخ: يکشنبه 16 تير 1392 ساعت: 12:31

ايجاد متن هاي متحرک

ايجاد متن هاي متحرک در صفحه HTML

تگ <marquee> به شما اجازه مي دهد که يک متن را به دلخواه خود در صفحه به حرکت در آوريد. براي انجام اين کار به جاوا اسکرپت نياز نداريد. تنها مشکل اين است که مرورگرهايي که بر پايه Netscape ساخته شده اند، نمي توانند به طور کامل با اين تگ سازگار شوند و در پاره اي از اوقات با آن مشکل پيدا مي کنند و تنها متن بدون حرکت را نشان مي دهند.

طراحی وب سایت

در اينجا مي توانيد کدي را که براي ساخت متن متحرک ستفاده مي شود مشاهده کنيد:

<marquee loop="infinite">متن مورد نظر خود را اينجا بنويسيد</marquee>

مي خواهيد ببينيد چگونه کار مي کند: